
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * { margin: 0; padding: 0; }
        body { font-size: 14px; color: #333; font-family: "Microsoft Yahei"; }
        ul, li { list-style-type: none; }

        #treeView {
            width: 600px;
            margin: 20px auto 0;
            border: 1px solid #f2f2f2;
        }
        .treeNode {
            height: 32px;
            border: 1px solid #fff;
            border-width: 1px 0;
            cursor: pointer;
            font-size: 0;
        }
        .treeNode:hover {
            background: #f4f9fd;
            border-color: #e5f0fb;
        }
        .treeNode-cur,
        .treeNode-cur:hover {
            background: #e5f0fb;
            border-color: #BBD4EF #fff;
        }
        .icon {
            display: inline-block;
            background: url(icon.png) no-repeat;
            vertical-align: middle;
        }
        .icon-minus {
            width: 15px;
            height: 15px;
            margin: 0 4px;
            background-position: -30px -22px;
        }
        .icon-add {
            width: 15px;
            height: 15px;
            margin: 0 4px;
            background-position: -30px 0;
        }
        .icon-file {
            width: 22px;
            height: 18px;
            margin-right: 5px;
            background-position: 0 -22px;
        }
        .title {
            position: relative;
            top: 6px;
            font-size: 14px;
        }

        .treeNode-empty .icon-minus {
            background-position: -999px -999px;
        }
        .treeNode-empty .icon-add {
            background-position: -999px -999px;
        }

        #treeView ul.none {
            display: none;
        }
    </style>
</head>
<body>

<div id="treeView"></div>

<script src="/js/jquery-1.12.1.min.js"></script>
<script src='/js/tools.js'></script>
<script src='/js/tree.js'></script>

<script>
    var data = {
        files: [
            {
                id: 0,
                pid: -1,
                title: '测试栏目'
            },

            {
                id: 1,
                pid: 0,
                title: '栏目111'
            },
            {
                id: 2,
                pid: 0,
                title: '栏目2222'
            },
            {
                id: 3,
                pid: 0,
                title: '栏目3333'
            },
            {
                id: 4,
                pid: 0,
                title: '栏目4444'
            },

            {
                id: 11,
                pid: 1,
                title: '栏目111111'
            },
            {
                id: 12,
                pid: 1,
                title: '11111111'
            },
            {
                id: 13,
                pid: 1,
                title: '222222'
            },

            {
                id: 41,
                pid: 4,
                title: 'JavaScript '
            },
            {
                id: 42,
                pid: 4,
                title: 'Query'
            },
            {
                id: 43,
                pid: 4,
                title: 'JavaScript'
            }
        ]}


    var treeView = tools.$('#treeView');
    var fileData = data.files;


    treeView.innerHTML = treeHtml(fileData, -1);

    // 浜嬩欢
    var fileItem = tools.$('.treeNode');
    var root_icon = tools.$('.icon-control', fileItem[0])[0];

    root_icon.className = 'icon icon-control icon-minus';

    tools.each(fileItem, function (item) {
        filesHandle(item);
    });



    $(".treeNode").click(function() {
        console.log("点击了"+$(this).attr('data-file-id'))
    })
</script>
</body>
</html>